<template>
    <div>
        <el-alert
            title="设置热更新资源版本, 正常情况只需要配置一条未限定渠道的数据即可(所有渠道通用), 如果想对某个渠道单独配置, 则新建时指定渠道号."
            type="warning"
            :closable="false"
            show-icon>
        </el-alert>
        <el-divider></el-divider>
        <div class="filter-container">
            <el-form label-position="left" :inline="true" >
<!--                <el-form-item label="应用">-->
<!--                    <select-apps v-model="search.appid"></select-apps>-->
<!--                </el-form-item>-->
                <el-form-item label="渠道">
                    <select-app-source v-model="search.source"></select-app-source>
                </el-form-item>
                <el-form-item label="系统">
                    <select-os v-model="search.os"></select-os>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="search.status" clearable class="filter-item" placeholder="状态筛选" style="width: 120px;">
                        <el-option
                            v-for="(item, index) in options.status"
                            :key="index"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
                    <el-button class="filter-item" icon="el-icon-plus" type="primary" @click="create" plain>添加资源</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table
            v-loading.body="loading"
            ref="multipleTable"
            :row-class-name="tableRowClassName"
            stripe
            border
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            class="text-center"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40"/>
<!--            <el-table-column label="AppID" prop="appid" width="120">-->
<!--                <template slot-scope="scope">-->
<!--                    <tag-apps :appid="scope.row.appid"></tag-apps>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column label="渠道号" prop="source" width="120">
                <template slot-scope="scope">
                    <tag-app-source :source="scope.row.source"></tag-app-source>
                </template>
            </el-table-column>
            <el-table-column label="系统类型" prop="os" width="80">
                <template slot-scope="scope">
                    <tag-os :data="scope.row.os"></tag-os>
                </template>
            </el-table-column>
            <el-table-column label="版本" prop="version"/>
            <el-table-column label="最小版本" prop="min_version"/>
            <el-table-column label="测试资源" prop="is_debug">
                <template slot-scope="scope">
                    <boolean-icon :data="scope.row.is_debug"></boolean-icon>
                </template>
            </el-table-column>
            <el-table-column label="URL" prop="url">
                <template slot-scope="scope">
                    <el-popover placement="top" trigger="click" :content="scope.row.url" v-if="scope.row.url">
                        <el-button  slot="reference">查看</el-button>
                    </el-popover>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="备份URL" prop="bak_url">
                <template slot-scope="scope">
                    <el-popover placement="top" trigger="click" :content="scope.row.bak_url" v-if="scope.row.bak_url">
                        <el-button  slot="reference">查看</el-button>
                    </el-popover>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="created_at" width="160"/>
            <el-table-column label="更新时间" prop="updated_at" width="160"/>
            <el-table-column label="操 作" width="150px">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        @click="edit(scope.row)">
                        编辑
                    </el-button>
                    <destroy-confirm
                        route="appResource/Destroy"
                        :primary="scope.row.id"
                        @success="handleSearch">
                    </destroy-confirm>
                </template>
            </el-table-column>
        </el-table>

        <div class="mt-10 pull-left">
            <destroy-multiple
                route="appResource/DestroyMultiple"
                :selected="selected"
                @success="handleSearch">
                <el-button type="danger" plain>删除选中</el-button>
            </destroy-multiple>
        </div>

        <el-pagination
            class="pull-right"
            background
            :current-page.sync="pageNo"
            :page-sizes="pageOptions.pageSizesList"
            :page-size="pageSize"
            :layout="pageOptions.layout"
            :total="totalDataNumber"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

        <el-dialog
            :title="form.data && form.data.id ? '编辑资源' : '添加资源'"
            :visible.sync="form.show"
            width="30%"
            :append-to-body="true"
            center>
            <dialog-form
                :data="form.data"
                v-on:submit="onFormSubmit"
                v-on:cancel="form.show = false">
            </dialog-form>
        </el-dialog>

        <el-dialog
            :visible.sync="dialogNotice.show"
            :append-to-body="true"
            width="500px"
            center>
            <h2>正式服热更新完毕一定要将客户端版本上传留底，切换到线上dev和线上master同步至留底记录。</h2>
        </el-dialog>
    </div>
</template>

<script>
import TagOs from '~/components/Tag/os'
    import dialogForm from './form'
    export default {
        components: {
            dialogForm,
            TagOs,
        },
        data() {
            return {
                search: {
                    status: '',
                },
                loading: false,
                selected: [],
                tableData: [],
                pageNo: 1,
                pageSize: 20,
                totalDataNumber: 0,
                pageOptions: this.$store.state.backend.pageOptions,
                options: this.$store.state.appResource.options,
                form: {
                    data: {},
                    show: false,
                },
                dialogNotice: {
                    show: false,
                }
            }
        },
        computed: {

        },
        methods: {
            handleSizeChange(val) {
                this.pageNo = 1;
                this.pageSize = parseInt(`${val}`);
                this.handleSearch();
            },
            handleCurrentChange(val) {
                this.pageNo = parseInt(`${val}`);
                this.handleSearch();
            },
            handleSelectionChange(val) {
                this.selected = val;
            },
            handleSearch() {
                this.loading = true;
                let filter = Object.assign({}, this.search, {
                    page: this.pageNo,
                    pageSize: this.pageSize,
                });
                this.$store.dispatch('appResource/Lists', filter).then(res => {
                    this.tableData = res.data.data;
                    this.totalDataNumber = res.data.meta.total;
                }).finally(() => {
                    this.loading = false;
                });
            },
            initData() {
                this.handleSearch();
            },
            create() {
                this.form.data = {};
                this.form.show = true;
            },
            edit(row) {
                this.form.data = row;
                this.form.show = true;
            },
            onFormSubmit() {
                this.form.show = false;
                this.handleSearch();
                this.dialogNotice.show = true;
            },
            tableRowClassName({row, rowIndex}) {
                if (row.status) return 'color-success';
                return 'color-danger';
            },
        },
        created() {
            this.initData();
        }
    }
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>
